<template>
  <div class="manage_page fillcontain">
    <div class="header_container">
      <img src="../assets/stu/icon_title.png" @click="goHome" style="cursor: pointer" />
      <el-dropdown @command="handleCommand" style="float: right;margin-right: 50px">
        <div style="margin-left: 15px;float:left;margin-top: 8px;margin-bottom: 6px"><img style="align-content: center; cursor: pointer;" src="../assets/stu/pic_title_user.png" height="32" width="32"/></div>
        <div style="float: left;vertical-align: middle;line-height: 50px;margin-left: 10px;">{{user.name}}</div>
        <!--<img src="../assets/stu/pic_title_user.png" style="cursor: pointer">-->
        <!--{{user}}-->
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="goProfile">个人资料</el-dropdown-item>
          <el-dropdown-item command="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!--<el-menu mode="horizontal" :default-active="defaultActive" router class="top-nav">-->
    <!--<el-menu-item index="/platform/myCenter">首页</el-menu-item>-->
    <!--<el-menu-item index="/platform/discussion">E问</el-menu-item>-->
    <!--</el-menu>-->
    <div class="top-nav">
      <ul>
        <li><div @click="goHome" style="cursor: pointer">首页</div></li>
        <li><div @click="goAsk" style="cursor: pointer">讨论区</div></li>
      </ul>
    </div>
    <div class="eAsk">
      <el-row :gutter="20">
        <img src="../assets/bg_new.png" style="border-radius: 256px; width: 50px; height: 50px; margin-left: 50px; margin-top: 20px; margin-bottom: 10px">
        <p style="margin-left: 50px"><span>作者：{{discussionDetail.user_name}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>时间：{{discussionDetail.create_time | formatTime}}</span> <span style="float: right;margin-right: 50px">查看次数：{{look_count}}</span><span style="float: right;margin-right: 15px">评论次数：{{answer_count}}</span></p>
        <div style="height: 0px; border: #cccccc 1px solid"></div>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="17" :offset="3">
          <h3 style="text-align: center; margin-top: 20px">{{discussionDetail.title}}</h3>
          <div style="margin: 20px 50px 20px 50px;" v-html="discussionDetail.content"></div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="17" :offset="3">
        <div style="margin: 20px 50px 20px 50px;color: cadetblue">
          <b>相关评论：</b>
        </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-for="discussionReply in discussionReplyList" :key="discussionReply">
        <el-col :span="17" :offset="3">
        <div style="border-top: #cccccc 1px solid; margin: 10px 0px 10px 0px">
          <div style="width: 145px; float: left">
            <img src="../assets/bg_new.png" style="border-radius: 256px; width: 50px; height: 50px; margin-left: 50px; margin-top: 20px; margin-bottom: 10px; ">
            <p style="text-align: center">{{discussionReply.user_name}}</p>
          </div>
          <div style="width: 80%; float: left;">
            <p style="margin-top: 20px" v-html="discussionReply.content"></p>
            <p style="margin-top: 20px"><small>{{discussionReply.discuss_time | formatTime}}</small></p>
          </div>
        </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 30px">
        <el-col :span="17" :offset="3">
        <el-form :model="formData" ref="formData" label-width="110px" class="demo-formData">
          <el-form-item label="你的回复" prop="requirement">
            <quillEditor v-model="formData.requirement" placeholder="请输入内容" style="width: 100%"></quillEditor>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="postReplyAsk">发布</el-button>
          </el-form-item>
        </el-form>
        </el-col>
      </el-row>
    </div>
    <div class="foot">
      <div class="footer">
        <div style=" margin-top: 15px;float: left;">
          <img src="../assets/stu/icon_title.png"/>
          <div style="margin-top: 15px;width: 450px">
            <span style="width: 100px;color: #979797;font-size: 14px;text-align: left">物联网智慧实训平台是以物联网技术实训作为出发点，搭载E学堂教学信息化，为用户提供完整体系的物联网学习平台。</span>
          </div>
        </div>
        <div class="footer-copyright">
          <table>
            <tr>
              <td style="border:0;vertical-align:middle;height:25px;font-size:15px;color: #979797">©2016-2020
                北京新大陆时代教育科技有限公司 版权所有
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getClientUser, clientLogout, getAskDetail, getReplyAskList, postReplyAskList, timeFormat} from '@/api/api'
  import { quillEditor } from 'vue-quill-editor'
  export default {
    data () {
      return {
        askID: this.$route.params.ask_id,
        myUrl: '',
        user: '123',
        user_ID: 0,
        discussionDetail: {},
        discussionReplyList: [],
        look_count: 0,
        answer_count: 0,
        formData: {
          requirement: ''
        }
      }
    },
    components: {
      quillEditor
    },
    computed: {
      defaultActive: function () {
        if (this.$route.path.indexOf('/learn') > 0) {
          return '/platform/myTask'
        }
        return this.$route.path
      }
    },
    created () {
      this.initData()
    },
    filters: {
      formatTime (time) {
        return timeFormat(time)
      }
    },
    methods: {
      goProfile () {
        this.$router.push({path: '/platform/profile'})
      },
      goHome () {
        this.$router.push({path: '/platform/myTask'})
      },
      goAsk () {
        this.$router.push({path: '/platform/discussion'})
      },
      logout () {
        clientLogout({username: this.user.username}).then(res => {
          this.$router.push({path: '/'})
        })
      },
      initData () {
        getClientUser().then(res => {
          if (res.status === 201) {
//            this.$router.push({path: '/'})
          } else {
            this.user = res.data
            this.user_ID = res.data.id
          }
        })
      },
      handleCommand (command) {
        switch (command) {
          case 'logout':
            this.logout()
            break
          case 'goProfile':
            this.goProfile()
            break
        }
      },
      getAskDetails (askId) {
        getAskDetail(askId).then(res => {
          this.discussionDetail = res.data
          this.look_count = res.data.look_count
        }, res => {
          alert(res.status)
        })
      },
      getReplyAsks () {
        getReplyAskList(this.askID).then(res => {
          // debugger
          this.discussionReplyList = res.data.detail
          this.answer_count = this.discussionReplyList.length
        }, res => {
          alert(res.status)
        })
      },
      postReplyAsk () {
        let formdata = {content: this.formData.requirement, user: this.user_ID, title: this.askID}
        formdata = JSON.stringify(formdata)
        postReplyAskList(this.askID, formdata).then(res => {
          this.discussionReplyList.push(res.data)
        }, res => {
          alert(res.status)
        })
      }
    },
    mounted () {
      this.getAskDetails(this.askID)
      this.getReplyAsks()
    }
  }
</script>

<style scoped lang="less">
  .top-nav {
    height: 45px;
    background: #499aff;
    ul {
      margin-left: 50px;
      li {
        float: left;
        color: white;
        list-style:none;
        font-size: 18px;
        div {
          width: 100px;
          height: 100%;
          margin-top: 8px;
          margin-left: 50px;
          text-align: center;
        }
      }
    }
  }

  .header_container{
    background-color: white;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    img {
      margin-left: 40px
    }
  }

  .foot {
    /*height: 20%;*/
    /*margin-top: 10px;*/
    /*position: absolute;*/
    /*bottom: 0;*/
    width: 100%;
    height: 186px;
    background: #e0e6ef;
  }

  .footer {
    position: relative;
    width: 1200px;
    left: 0;
    bottom: 0;
    margin: 0 auto;
  }
  .footer-copyright {;
    margin-right: 60px;
    float: right;
    margin-top: 100px;
    overflow: hidden;
    font-size: 15px;
    font-family: "Microsoft YaHei";
    text-align: center;
  }
  .eAsk {
    width: 100%;
  }

</style>

